<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        margin: 50px;
        padding: 50px;
        border: 10px red solid;
        background-color: aqua;
        overflow: auto;
      }
      #box2 {
        width: 500px;
        height: 500px;
        background-color: bisque;
      }
    </style>
  </head>
  <body>
    <button id="btn1">点</button>
    <hr />
    <div style="position: relative;">
        <div id="box1">
            <div id="box2">
        </div>
    </div>
    </div>

    <script>
      /* 
        
        元素.clientHeight
        元素.clientWidth
            -获取元素内部的宽度和高度(包括内容区和内边距
            -会被滚动条影响,减去滚动条的px
        元素.offsetHeight
        元素.offsetWidth
            -获取元素的可见框和大小(包括内容区,内边距和边框)
            -如果有滚动条,被撑大了,会是撑大的长高+外边距*2
        元素.srcollHeight
        元素.srcollWidth
            - 获取元素滑动区域的大小
            - 内容的长高+上外部盒子的内边距
        元素.offsetParent
            -获取元素的定位父元素
            -定位父元素:离当前元素最的开启了定位的祖先元素,
                如果所有的元素都没有开启定位则返回body
                会一路找!
        元素.offsetTop
        元素.offsetLeft
            -获取元素的相对其定位的父元素偏移量
            // 当盒子内有外边框时候,顶出的px,上下不会计算,左右会算,因为外部盒子也会顶到外边框的px上,导致查的px是0
        元素.scrollTop
        元素.scrollLeft
            -获取或设置当前元素滚动条的偏移量


        */
      /* 
       其实在浏览器中,只要你创建了id,就已经帮你设置了一个元素
       */
      const btn1 = document.getElementById('btn1');
      const box1 = document.getElementById('box1');
      const box2 = document.getElementById('box2');
      btn1.onclick = function () {
        // console.log(box1.clientHeight);
        // console.log(box1.clientWidth);

        /* 
        因为多了一个滑动条的框,少了17px的长高
        */
        /* console.log(box1.scrollHeight);
        console.log(box1.scrollWidth);
         */
        /* 
         console.log(box1.scrollHeight);
         console.log(box1.scrollWidth);
          */
        /* console.log(box1.offsetParent);
         */

         /* console.log(box1.offsetTop);
         console.log(box1.offsetLeft);
          */
         console.log(box1.scrollTop);
         console.log(box1.scrollLeft);
        box1.scrollTop = 100
        };
    </script>
  </body>
</html>
